<template>
    <div>
        <Row style=" padding: 6px 10px; border-bottom: 1px solid #F5F6FA;">
            <Col :span="16">
            <div style=" position: relative;top: 2px;">
                <TypographyTitle style="display:inline-block;font-size:14px;margin-right: 8px;" :level="5">
                    {{ type === 'EDIT_LINE' ? direction === 'left' ? waterText.LEFT_WATER_METER_TITLE :
                            waterText.RIGHT_WATER_METER_TITLE : null
                    }}
                    {{ type === 'CHANGE_BOOK' ? direction === 'left' ? `${waterText.WATER_LIST_TITLE}:${props.bookNum}` :
                            `${waterText.WATER_LIST_TITLE}:` : null
                    }}
                </TypographyTitle>
                <Select @change="selectChange" showSearch  style="width:200px" size="small" optionFilterProp="label" :allowClear="true" v-if="type === 'CHANGE_BOOK' && direction === 'right'">
                    <SelectOption v-for="(item, index) in optionsList" :value="item.value" :label="item.label" :key="index" >{{ item.label }}
                    </SelectOption>
                </Select>
            </div>
            </Col>
            <Col :span="6" :offset="2">
            <!-- <Select v-model:value="monthSelect" style="width:100px;float: right; position: relative; top: 2px;"
            size="small">
            <SelectOption v-for="(item, index) in MonthBimonthly" :key="index" :value="item.value">{{ item.label }}
            </SelectOption>
        </Select> -->
            <MonthSelect v-if="direction === 'left'" v-bind="$attrs" :month="month" @selectMonth="handleMonth" />
            </Col>
        </Row>
    </div>
</template>
<script lang="ts" setup>
import { toRefs } from 'vue';
import { Row, Col, Select, Typography } from 'ant-design-vue';
import MonthSelect from './MonthSelect.vue';
import { waterText } from '../enum/index';
const TypographyTitle = Typography.Title;
const SelectOption = Select.Option;
const props = defineProps<{
    month: number | undefined,
    direction: string,
    type: string,
    bookNum?: number | string,
    optionsList? : object[] | undefined
}>()
const emits = defineEmits(["changeMonth","selectBook"])
const { month, direction, type } = props;
const { optionsList } = toRefs(props)
const selectChange = (value:string,option:object[])=>{
    emits("selectBook",type,value);
}


const handleMonth = (newValue:string) => {
    // console.log('handleMonth---', newValue);
    console.log(newValue, 'newValue', type);
    
    emits("changeMonth",type,newValue)
}

</script>